</div>
    <!-- 你的HTML代码 -->
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>列表</legend>
    </fieldset>
    <div class="layui-tab">
            <!--第一项-->
            <div class="layui-tab-item layui-show">
                <div id="extra">
                    <button type="button" data-method="addflow" class="layui-btn layui-btn-warm">新建</button>
                </div>
                <div id="edit" style="display:none">
                    <form style="width:90%;margin-left:5%;" class="layui-form layui-form-pane" lay-filter="editform" id="editform"></form>
                </div>
                <div id="time_line" class="layui-row" style="display: none">

                </div>
                <div class="search" id="search" style="margin-top:1rem">
                    搜索流程ID：
                    <div class="layui-inline">
                        <input class="layui-input" name="id" id="searchid" autocomplete="off">
                    </div>
                    <button class="layui-btn" data-type="reload">搜索</button>
                </div>
                <!--审批流列表-->
                <table  lay-filter="workflow" id="workflow"></table>
                <!--审批流列表end-->
                <script type="text/html" id="bar">
                    <a class="layui-btn layui-btn-xs"  lay-event="details">详情</a>
                    <a class="layui-btn layui-btn-xs"  lay-event="process">进度</a>
                    <a class="layui-btn layui-btn-xs"  lay-event="edit">配置</a>
                    <a class="layui-btn layui-btn-xs"  lay-event="recall">撤回</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                </script>
            </div>
            <!--第一项end-->
        <!--内容容器end-->
    </div>
</div>
</div>
<script>
    //同步ajax请求数据转出
    var ajax = function(url,data){
        var arr = {};
        $.ajax({
            url:url,
            type:'post',
            data:data,
            dataType:"html",
            async: false,//关闭异步
            success:function(e){
                arr = eval('(' + e + ')');
            }
        });
        return arr;
    }
    layui.use(['table','form','layer','upload','element'], function() {
        var table = layui.table;

        /********************************初始化表格 --自发起********************************/
        table.render({
            elem: '#workflow'
            , url: "{$list_url}"
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , autoSort: true
            , cols: [[
                {type: 'checkbox', width: '3%'}
                , {field: 'id', title: 'ID', width: '3.5%', sort: true}
                , {field: 'name', title: '流程名称', width: '6.5%'}
                , {field: 'sponsor', title: '发起人', width: '5%'}
                , {field: 'create_time', title: '创建时间', width: '10%'}
                , {field: 'flow_id', title: '流程模版ID', width: '5%'}
                , {field: 'process_name', title: '下一审核节点', width: '10%'}
                , {field: 'peoples', title: '下一节点审核人', width: '25%', align: 'center'}
                , {
                    field: 'con_sign', title: '是否会审', width: '5%', templet: function (e) {
                        if (e.con_sign == 3) {
                            return '<span style="color: #0339fd;">是</span>';
                        } else {
                            return '<span style="color: #03ff06;">否</span>';
                        }
                    }
                }
                , {
                    field: 'audit_status', title: '审核状态', width: '5%', templet: function (e) {
                        if (e.audit_status == 1) {
                            return '<span style="color: #fdd303;">审核中</span>';
                        } else if (e.audit_status == 2) {
                            return '<span style="color: #03ff06;">已通过</span>';
                        } else if (e.audit_status == 3) {
                            return '<span style="color: #493131;">被打回</span>';
                        } else if (e.audit_status == 4) {
                            return '<span style="color: rgba(33,32,26,0.94);">已撤回</span>';
                        }
                    }
                }//minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , {fixed: 'right', toolbar: '#bar', width: '22%'}
            ]]
            , page: true
            ,limit: 5
            ,limits:[5,10,15,20,25]
            , response: {
                statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
            }
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                var result;
                if(this.page.curr){
                    result = res.data.slice(this.limit*(this.page.curr-1),this.limit*this.page.curr);
                }
                else{
                    result=res.data.slice(0,this.limit);
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": result //解析数据列表
                };
            }, //头工具栏事件
        });
        /**********************************表格重载(查询)************************************/
        var btns = {
            reload: function () {
                var searchid = $('#searchid');
                var searchname = $('#searchname');
                console.log(searchid.val()+'----'+searchname.val());
                //执行重载
                table.reload('workflow', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                            id: searchid.val(),
                            name: searchname.val(),
                    }
                }, 'data');
            },
        };
        /********************************监听行工具事件（自发起）************************************/
        table.on('tool(workflow)', function (obj) {
            var data = obj.data;
            //查询当前流程状态，审批开始以后必须撤回才能编辑，
            let cherk_url = "{:url('Workflowajax/check_flow')}";
            $res = ajax(cherk_url, data);
            if (obj.event === 'del' && ($res.msg == 3 || $res.msg == 4)) {
                layer.confirm('真的删除记录么？', function (index) {
                    let url = "{$del_url}";
                    let res = ajax(url, {'id':data.form_extend});
                    if (res.code == 1) {
                        layer.msg(res.msg);
                        obj.del();
                        table.reload('workflow');
                    } else if (res.code == 0) {
                        layer.msg(res.msg);
                    }
                });
            } else if (obj.event === 'edit' && ($res.msg == 3 || $res.msg == 4)) {
                //根据表单是否外接判断打开页面  --自动创建特供
                    active.editform(data)
            } else if (obj.event === 'recall' && $res.msg == 1) { //撤回
                let url = "{:url('Workflowajax/recall_work_flow')}";
                let res = ajax(url, data);
                if (res.code == 1) {
                    layer.msg(res.msg);
                    table.reload('workflow');
                } else if (res.code == 0) {
                    layer.msg(res.msg);
                }
            } else if (obj.event === 'process') { //进程--时间轴
                // alert(data.id);
                active.settimeline(data);
            } else if (obj.event === 'details') { //详情页
                active.details(data);
            } else if(obj.event === 'next' && res.msg==2){
                active.nextwf();
            }
        });
        //弹窗表单
        var active = {
                editform: function (e) {
                    _this = layer.open({
                        type: 2//此处以iframe举例
                        , title: '修改'
                        , area: 'auto'
                        , shade: 0
                        , maxmin: true
                        , offset: 'auto'
                        , content: "{$edit_url}"+e.form_extend
                        , btn: ['关闭']
                        , btn1: function (index, layero) {
                            layer.close(index);
                            return false;
                        },
                        cancel: function (layero, index) {
                            layer.closeAll();
                        },
                        end: function () {
                            form_extend = top.form_extend;
                            if (form_extend == '' || form_extend == undefined || form_extend == null) {
                            } else {
                                let edit_url = "{:url('Workflowajax/edit_workflow')}";
                                let res = ajax(edit_url, {'workflow_id': data.id});
                            }
                            top.form_extend = '';
                            table.reload('workflow');
                            return false;
                        }
                    });
                    layer.full(_this); //窗口直接顶天立地
                },
                addflow: function () {
                    var that = this;
                    top.type = 'add';
                    //多窗口模式，层叠置顶
                    _aaa = layer.open({
                        type: 2//此处以iframe举例
                        , title: '添加'
                        , area: ['800px', '600px']
                        , shade: 0.3
                        , shadeClose: true
                        , maxmin: true
                        , offset: 'auto'
                        , content: "{$add_url}"
                        , btn: ['关闭']
                        , success: function (layero, index) {

                        }
                        , btn1: function (index, layero) {
                            layer.close(index);
                            table.reload('workflow');
                        },
                        btn2: function (index, layero) {
                            layer.close(index);
                            return false;
                        },
                        cancel: function (layero, index) {
                            layer.closeAll();
                        },
                        end: function () {
                            table.reload('workflow');
                        }
                    });
                    layer.full(_aaa); //窗口直接顶天立地
                },
                details: function (e) {
                    _aaa = layer.open({
                        type: 2//此处以iframe举例
                        , title: '详情'
                        , area: ['817px', '600px']
                        , shade: 0.3
                        , shadeClose: true
                        , maxmin: true
                        , offset: 'auto'
                        , content: "{$details_url}"+e.form_extend
                        , btn: ['关闭']
                        , btn1: function (index, layero) {
                            layer.close(index);
                            return false;
                        },
                        cancel: function (layero, index) {
                            layer.closeAll();
                        },
                        end: function () {
                            table.reload('workflow');
                        }
                    });
                    layer.full(_aaa); //窗口直接顶天立地
                },
                settimeline: function (e) {
                    top.workflow = e;
                    layer.open({
                        type: 2//此处以iframe举例
                        , title: '时间轴'
                        , area: ['1024px', '800px']
                        , shade: 0.3
                        , shadeClose: true
                        , maxmin: true
                        , offset: 'auto'
                        // ,content: $("#time_line")
                        , content: "{:url('workflowrovalstart/process')}"
                        , btn: ['关闭']
                        , btn1: function (index, layero) {
                            layer.close(index);
                            return false;
                        },
                        cancel: function (layero, index) {
                            layer.closeAll();
                        }
                    });
                },
                nextwf: function (e) {
                    alert(11);
                    return false;
                    top.workflow = e;
                    layer.open({
                        type: 2//此处以iframe举例
                        , title: '流程时间轴'
                        , area: ['1024px', '800px']
                        , shade: 0.3
                        , shadeClose: true
                        , maxmin: true
                        , offset: 'auto'
                        // ,content: $("#time_line")
                        , content: "{:url('workflowrovalstart/process')}"
                        , btn: ['关闭']
                        , btn1: function (index, layero) {
                            layer.close(index);
                            return false;
                        },
                        cancel: function (layero, index) {
                            layer.closeAll();
                        }
                    });
                },
            };
        //弹窗表单按钮控制器
        $('#extra .layui-btn').on('click', function () {
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });
        $('#search .layui-btn').on('click', function () {
            var othis = $(this), type = othis.data('type');
            btns.reload();
        });
    })
    /**************************layui实例化结束*************************/
</script>

